<template>
  <div>
    <div class="input_ret">
      <div>
        <span>商品分类：</span>
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div class="input">
        <!-- 搜索 -->
        <p>商品搜索：</p>
        <el-input v-model="input" placeholder="请输入内容"></el-input>
        <el-button type="info" plain icon="el-icon-search"></el-button>
      </div>
    </div>
    <!-- 添加 -->
    <el-button type="primary">添加商品</el-button>
    <!-- 表格 -->
    <el-table
      :data="
        tableData.slice(
          (currentPage - 1) * pagesize,
          currentPage * pagesize
        )
      "
      style="width: 100%"
    >
      <el-table-column prop="id" label="ID" width="50"></el-table-column>
      <el-table-column label="商品圈" width="100">
        <template slot-scope="scope">
          <img style="height: 50px" :src="scope.row.img" alt />
        </template>
      </el-table-column>
      <el-table-column prop="title" label="商品名称" width="180"></el-table-column>
      <el-table-column prop="price" label="商品售价" width="80"></el-table-column>
      <el-table-column prop="price" label="销量" width="80"></el-table-column>
      <el-table-column prop="price" label="库存" width="80"></el-table-column>
      <el-table-column prop="title" label="状态" width="100"></el-table-column>
      <el-table-column prop="tel" label="操作时间" width="180"></el-table-column>
      <el-table-column fixed="right" label="操作" width="120">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">加入回收站</el-button>
          <!-- <el-button @click.native.prevent="edit(scope.row, tableData)" type="text" size="small">编辑</el-button> -->
            <el-button
                @click.native.prevent="edit(scope.row, tableData)"
                type="text"
                size="small"
              >编辑</el-button>
          <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
            <el-form :model="form">
              <el-form-item label="活动名称" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="活动区域" :label-width="formLabelWidth">
                <el-select v-model="form.region" placeholder="请选择活动区域">
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
            </div>
          </el-dialog>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 20, 40]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.length"
    ></el-pagination>
  </div>
</template>

<script>
import axios from "axios"
export default {
  name: "Bmode",
  data() {
    return {
      value: "",
      input: "",
      options: [],
      tableData: [],
      total: 2, //总页
      currentPage: 1, //初始页
      pagesize: 7, //每页数据
      dialogFormVisible: false,
      form: {
        name: '',
        price:"",
        title:"",
        word:""
      },
      formLabelWidth: '120px'
    }
  },
  created() {
    axios.get("getList").then((res) => {
      this.tableData = res.data.data;
      console.log("res...", res.data.data);
    });
  },

  methods: {
    //分页
    handleSizeChange: function (size) {
      this.pagesize = size;
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage;
    },
  },
  //搜索
  handleSearch() {
    axios
      .get(`getList/?keyword=${this.input}`)
      .then((res) => {
        this.tableData = res.data.data;
      });
  },
  enterSearch() {
    document.onkeydown = e => {
      //回车后执行搜索方法
      this.handleSearch()

    }
  },
  //编辑
    edit(row){
      console.log(row)
      this.dialogFormVisible=true;
    }
}
</script>

<style scoped lang="scss">
.input_ret {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
}
.input {
  width: 50%;
  display: flex;
  align-items: center;
  p {
    width: 100px;
  }
}
.el-button {
  margin: 5px 0;
}
.el-pagination {
  width: 70%;
  text-align: right;
  padding: 20px;
}
span {
  padding: 0 20px;
}
.el-dialog__body {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.el-form {
  width: 100%;
  display: flex;
  flex-direction: column;
}
header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  border-top: 1px solid #ccc;
  .form_tag {
    width: 90%;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    i {
      border: 1px solid #ccc;
      padding: 10px 15px;
      font-size: 16px;
      font-weight: bolder;
    }
  }
  .el-input--prefix {
    width: 400px;
    margin: 0 20px;
  }
}
.main_conter {
  width: 100%;
  height: 300px;
  overflow: scroll;
  display: flex;
  .el-col {
    width: 200px;
  }
  h5 {
    text-align: center;
  }
  li {
    text-align: center;
    padding: 10px 0;
  }
  .right {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    dl dd img {
      width: 110px;
      height: 110px;
      padding: 10px;
    }
  }
}
</style>